<template>
	<view>
		<view class="bgw">
			<view class="item">
				<view class="flex">
					<view class=" flex-1 flex">
						<view class="font-bold">
							{{detail.date}}
						</view>
					</view>
					
					<view class="" style="width: 20%;">
						{{detail.child && detail.child.length}}
					</view>
					<view class=""  style="width: 20%;" v-if="cost">
						￥{{cost|formatPrice}}
					</view>
					<view class=""  style="width: 20%;" v-else>
						-
					</view>
					<view class=""  style="width: 60px">
						<view class="flex" style="justify-content: flex-end;">
							<view class="ml10 icon-btn"  @click="share()">
								<u-icon name="share" color="#999999" size="16"></u-icon>
							</view>
							<view class="ml10 icon-btn" :class="show?'active':''"  @click="toggle()">
								
								<u-icon :name="show?'arrow-up':'arrow-down'" :color="show?'#ffffff':'#999999'" size="16"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="show">
			<template v-for="(v,time_i) in detail.child">
				<view class="time-item-box" :class="showTimeObj[time_i]?'active':''">
				<u-line></u-line>
				<view class="item">
					<view class="flex">
						<view class="mr15">
							{{v.place_time |formatTime}}
						</view>
						<view class="flex flex-1">
							<view class="ml5" v-if="v.is_locked">
								<u-icon name="lock" color="#999999" size="16"></u-icon>
							</view>
							<!-- <view class="font-bold text-ellipsis" v-if="v.cus_group_id">
								{{v.cus_group_id[1]}}·
							</view> -->
							<view class="font-bold text-ellipsis">
								{{v.create_uid[1]}}
							</view>
							 <!-- style="white-space: nowrap;" -->
						</view>
				
						<view class="text-ellipsis" style="width: 25%;">
							<!-- <text v-if="detail.child[time_i].child.length>0">
								{{detail.child[time_i].child[0].mm_id[1]}}...
							</text> -->
							<text>{{v.supplier_id[1]}}</text>
						</view>
						<view class="" v-if="costChild[time_i]" style="width: 20%;">
							￥{{costChild[time_i]|formatPrice}}
						</view>
						<view class="" style="width: 20%;" v-else>
							-
						</view>
						<view class="" style="width: 60px">
							<view class="flex" style="justify-content: flex-end;" v-show="detail.child[time_i].child.length > 0">
								<view class="ml10 icon-btn" @click="share(time_i)">
									<u-icon name="share" color="#999999" size="16"></u-icon>
								</view>
								<view class="ml10 icon-btn" :class="showTimeObj[time_i]?'active':''"  @click="toggle(time_i)">
									<u-icon :name="showTimeObj[time_i]?'arrow-up':'arrow-down'" :color="showTimeObj[time_i]?'#ffffff':'#999999'" size="16"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="food-box" v-show="showTimeObj[time_i]">
					<view class="item">
						<view class="flex font-24 text-light-gray">
							<view class="flex-1">
								食材
							</view>
							<view class="text-center" style="width: 80rpx">
								数量
							</view>
							<view class="text-center" style="width: 80rpx">
								单位
							</view>
							<view class="text-center" style="width: 100rpx">
								单价
							</view>
							<view class="text-center" style="width: 120rpx">
								金额
							</view>
							<view class="text-center" style="width: 60px">
								状态
							</view>
						</view>
					</view>
					<template v-for="(food,food_i) in detail.child[time_i].child">
						<!-- <u-line dashed></u-line> -->
						<view class="item">
							<view class="flex">
								<view class="flex-1" style="width: 130rpx">
									{{food.mm_id[1]}}
								</view>
								<view class="text-center"  style="width: 80rpx">
									{{food.purchase_unit_qty}}
								</view>
								<view class="text-center"  style="width: 80rpx">
									{{food.purchase_unit_id[1]}}
								</view>
								<view class=" text-center"  style="width: 100rpx">
									{{food.purchase_unit_price}}
								</view>
								<view class=" text-center"  style="width: 120rpx" v-if="food.purchase_cost">
									￥{{food.purchase_cost | formatPrice}}
								</view>
								<view class="text-center"  style="width: 120rpx" v-else>
									-
								</view>
								<view class="flex" style="width: 60px;justify-content: space-around;">
									<view class="">
										<u-button type="primary" text="待入库" size="mini" :customStyle="btnCustomStyle" v-if="food.status == 's0_pending'" @click="toggleStatus(food,food_i,time_i)"></u-button>
										<u-button type="error" text="关闭" size="mini" :customStyle="btnCustomStyle" v-else-if="food.status == 's3_closed'" @click="toggleStatus(food,food_i,time_i)"></u-button>
										<u-button type="success" text="已入库" size="mini" :customStyle="btnCustomStyle" v-else @click="toggleStatus(food,food_i,time_i)"></u-button>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				</view>
			</template>
			</view>
		</view>
		
		<view class="blank20"></view>
	</view>
</template>

<script>
	import {
		toggle_po_record_detail_status
	} from '@/common/api.js';
	
	export default {
		name:"chef-item",
		props: {
			detail: Object
		},
		data() {
			return {
				id:this.detail.id,
				btnCustomStyle: {
					'padding': '0 3px',
					'min-width': 'auto'
				},
				show:false,
				showTimeObj:{},
				sratusObj:{}
			};
		},
		created() {
			console.log(this.detail.date);
		},
		watch:{
			detail: {
			    handler(newVal, oldVal) {
						if(newVal.date != oldVal.date){
							this.show = false;
							this.showTimeObj = {};
						}
			    },
			    immediate: false,
			    deep: true
			}
		},
		filters:{
			formatTime(value){
				let today = new Date(value);
				let date = new Date(value);
				let h_m = `${date.getHours()}`.padStart(2, '0')+`:` + `${date.getMinutes()}`.padStart(2, '0');
				return h_m
			}
		},
		computed:{
			cost(){
				let num = 0;
				this.detail.child.forEach(v=>{
					v.child.forEach(d=>{
						num += d.purchase_cost;
					})
				})
				return num;
			},
			costChild(){
				let numArr = [];
				this.detail.child.forEach(v=>{
					let num = 0;
					v.child.forEach(d=>{
						num += d.purchase_cost;
					})
					numArr.push(num);
				})
				return numArr;
			}
		},
		methods: {
			// init(){
			// 	this.detail.child.forEach((time,time_i)=>{
			// 		this.detail.child[i].child.forEach((food,food_i)=>{
			// 			this.sratusObj[`${time_i}_${food_i}`] = food.status;
			// 		})
			// 	})
			// },
			share(time_i){
				let ids = [];
				let date = this.detail.date;
				if(typeof time_i == 'undefined'){
					this.detail.child.forEach(v=>{
						ids.push(v.id);
					})
				}else{
					let id = this.detail.child[time_i].id;
					ids = [id]
				}
				// #ifndef MP-WEIXIN
				this.nav('/purchaseShare/purchaseShare?ids=' + ids.join(',')+'&date='+date);
				// #endif
				// #ifdef MP-WEIXIN
				this.nav('/purchaseShare/purchaseShareWx?ids=' + ids.join(',')+'&date='+date);
				// #endif
			},
			toggle(time_i){
				
				// this.show.show = i;
				if(typeof time_i == 'undefined'){
					this.show = !this.show;
					this.$forceUpdate();
					return;
				}
				this.showTimeObj[time_i] = !this.showTimeObj[time_i];
				this.$forceUpdate();
			},
			toggleStatus(food,food_i,time_i){
				let id = food.id;
				this.$store.dispatch('modal', `确认更换${food.mm_id[1]}的状态？`).then(() => {
					uni.showLoading({
						title: '加载中'
					});
					toggle_po_record_detail_status({
						id: id
					}).then((res) => {
						// console.log(res);
						// if(food.status == 's3_closed'){
						// 	food.status = 's0_pending';
						// }
						// if(food.status == 's0_pending'){
						// 	food.status = 's3_closed';
						// }
						let status = res.result;
						food.status = status;
						this.$set(this.detail.child[time_i].child, food_i, food);
						uni.$u.toast('操作成功');
					}).catch(() => {
				
					}).finally(() => {
						uni.hideLoading();
					});
				
				}).catch(() => {
				
				})
				
			}
		}
		
	}
</script>

<style>

</style>